<template>
    <div class="div1">
        <div class="logBox">
            <div class="logL">
                <img src="../assets/images/loglfet.png" alt="" srcset="" />
            </div>
            <div class="logR">
                <center>
                    <h1>登录</h1>
                </center>
                <center>
                    <div>非翔教育后台管理系统</div>
                </center>
                <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef">
                    <div class="ts">
                    </div>
                    <div class="inputBox">
                        <el-form-item prop="phome">
                            <el-input v-model="ruleForm.phome" placeholder="请输入账号">
                                <template #prefix>
                                    <img src="../assets/账号.svg" alt="" />
                                </template>
                            </el-input>
                        </el-form-item>

                    </div>
                    <div class="inputBox">
                        <el-form-item prop="password">
                            <el-input style="background-color: #f5ebff" v-model="ruleForm.password" type="password"
                                placeholder="请输入密码" show-password>
                                <template #prefix>
                                    <img src="../assets/账号.svg" alt="" />
                                </template>
                            </el-input>
                        </el-form-item>
                    </div>
                    <div class="yzmBox">
                        <el-form-item prop="captch">
                            <el-input style="width: 120px" type="text" placeholder="请输入验证码" class="input-val"
                                v-model="ruleForm.captch" />
                        </el-form-item>

                        <img :src="yzm" id="canvas" width="130" height="46" @click="handleCanvas" />
                    </div>
                </el-form>

                <div class="check">
                    <!-- <el-checkbox label="1个月免登陆" name="type" /> -->
                    <span>忘记密码请联系管理员</span>
                </div>
                <div class="but">
                    <button @click="dl(ruleFormRef)">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ElInput, ElIcon, ElCheckbox, ElAlert, ElForm, ElFormItem, ElMessage } from "element-plus";
// import { method } from "lodash";
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import axios from '../utils/http'
let yzm = ref()
let ca = document.cookie
const router = useRouter();
const ruleFormRef = ref()
const ruleForm = reactive({
    phome: '15925924407',
    password: 'admin',
    captch: ''
})
//表单验证
const rules = ({
    phome: [
        { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },

    ],
    captch: [
        { required: true, message: '请输入验证码', trigger: 'blur' },

    ]
})
const dl = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            console.log('aa',document.cookie);
            axios({
                url: "/loginemp",
                method: "post",
                data: {
                    empForm: {
                        captch: ruleForm.captch,
                        password: ruleForm.password,
                        phome: ruleForm.phome,
                    }
                }
            }).then((res) => {
                console.log(res)
                // router.replace({
                //     name: "home",
                // });
                if (res.data.code) {
                    ElMessage({
                        message: "登录成功",
                        type: 'success',
                    })
                    router.replace({
                        name: "home",
                    });
                } else {
                    ElMessage.error(`${res.data.msg}`)
                }
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
const handleCanvas = () => {

    axios({
        url: "/varfyCode",
        method: 'post',
        responseType: 'arraybuffer'
    }).then((res) => {
        console.log(res);
        // yzm.value = res.data
        //把图转换base64
        yzm.value =
            "data:image/png;base64," +
            btoa(
                new Uint8Array(res.data).reduce(
                    (data, byte) => data + String.fromCharCode(byte),
                    ""
                )
            );

    })
}
onMounted(() => {

    axios({
        url: "/varfyCode",
        method: 'post',
        responseType: 'arraybuffer',
    }).then((res) => {
        console.log(res);
        // yzm.value = res.data
        //把图转换base64
        yzm.value =
            "data:image/png;base64," +
            btoa(
                new Uint8Array(res.data).reduce(
                    (data, byte) => data + String.fromCharCode(byte),
                    ""
                )
            );
    })
})
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.div1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-image: url(../assets/images/bg.png);
    background-size: 100%;

    .logBox {

        width: 875px;
        height: 508px;
        background-color: #ffffff;
        box-shadow: 0px 2px 10px rgb(0 0 0 / 35%);
        border-radius: 6px;
        display: flex;

        .yzmBox {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        #canvas {
            float: right;
            margin-right: 1%;
            display: block;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        .input-val {
            width: 50%;
        }

        .logL {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 1;

            img {
                width: 300px;
            }
        }

        .logR {
            padding: 50px;
            width: 260px;

            center:nth-child(1) {
                color: #9933ff;
                margin-bottom: 14px;
            }

            center:nth-child(2) {
                color: #9933ff;
            }

            .ts {
                width: 100%;
                height: 20px;

            }

            .inputBox {
                margin-bottom: 20px;
            }

            .check {
                display: flex;
                justify-content: space-between;
                align-items: center;

                span,
                .el-checkbox {
                    font-size: 12px;
                    font-weight: 400;
                    color: #999999;
                }
            }

            .but {
                button {
                    width: 100%;
                    height: 44px;
                    border: 0;
                    margin-top: 30px;
                    border-radius: 8px;
                    color: #ffffff;
                    box-shadow: rgba(153, 0, 255, 0.498) 2px 2px 20px;
                    background-color: #9137f3;
                }
            }
        }
    }
}
</style>
<style lang="less">
.yzmBox {
    .el-input__wrapper {
        height: 44px;
        background-color: #f5ebff;
        border-radius: 8px;
    }

    .el-input__wrapper.is-focus {
        box-shadow: 0 0 0 2px #9339f1 inset;
    }
}

.inputBox {
    .el-input__wrapper {
        height: 44px;
        background-color: #f5ebff;
        border-radius: 8px;
    }

    .el-input__wrapper.is-focus {
        box-shadow: 0 0 0 2px #9339f1 inset;
    }
}
</style>
